
<template>
  <div class="discover-box">
    <div class="header">
      <div class="left">
        <svg class="icon" aria-hidden="true" @click="showHandler">
          <use xlink:href="#icon-31liebiao"></use>
        </svg>
        <van-popup v-model:show="show" position="left" :style="{ height: '100%', width: '6.3rem' }">
          <Myaside></Myaside>
        </van-popup>
      </div>
      <div class="search">
         <van-search shape="round" background="var(--discover-input)" input-align="center" placeholder="emo" /></div>

      <div class="right">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-maikefeng"></use>
        </svg>
      </div>
    </div>
    <MyBanner></MyBanner>
    <Nav></Nav>
    <playlistVue/>
  </div>

</template>
<script setup lang="ts">
import MyBanner from '@/components/discover/banner.vue'
import Myaside from '@/components/discover/aside.vue'
import Nav from '@/components/discover/nav.vue'
import { ref } from 'vue'
import playlistVue from '@/components/discover/playlist.vue';
const show = ref<boolean>(false)
const showHandler = () => {
  show.value = !show.value
  console.log(1111);

}



</script>

<style scoped lang="scss">
.discover-box {
  width: 100%;
  height: 100%;

  >.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .28rem;
    height: .66rem;
    background-color: var(--header-back);

    >.search {
      width: 5.58rem;
      height: .66rem;
      text-align: center;
    .van-search{
        padding: 0 !important;
        
      }

    }

  }
}

.icon {
  font-size: 20px;
  color: var(--header-icon-color);
}
</style>
